<template>
  <el-row class="col-home">
    <el-col :span="5" style="height: 100%">
      <div class="home-l">
        <Ttitle title="缆载吊机实时数据" class="pos-txt1" />
        <div class="box1">
          <div class="box1-item" v-for="(item,index) in box1List" >
            <div class="box1-item-top1">
                <div class="box1-item-top1-l">
                  <img :src="item.icon" alt="">
                  {{ item.name }}
                </div>
                <div class="box1-item-top1-r" :class="item.type == 1 ? 'box1-item-type1' : 'box1-item-type2'">
                  {{ item.typeName }}
                </div>
            </div>
            <div class="box1-item-c">
              <div class="box1-icon-box">
                <div class="box1-icon1" v-if="item.type == 1"></div>
                <div class="box1-icon2" v-if="item.type == 2"></div>
                {{ item.value }}
              </div>
              <el-progress :percentage="20" :show-text="false" :stroke-width="3" color="#19c3e3"/>
            </div>

            <div class="box1-item-bom">
              <div>{{ item.min }}</div>
              <div>{{ item.max }}</div>
            </div>
          </div>
        </div>
        <div class="pie-box">
          <div id="pie"></div>

          <div class="pie-mark">
            <div class="pie-mark-item" v-for="item in Pie1data" >
              <div class="mark" :style="{backgroundColor:item.itemStyle.color}"></div>
              <div class="pie-mark-name">{{ item.name }}</div>
              <div class="pie-mark-value">{{ item.value }}</div>

            </div>
          </div>

        </div>


        <Ttitle title="缆载吊机状态监测" class="pos-txt2" />
        <div class="box2">
          <div class="box2-item">
            <div class="box2-item-txt1">1</div>
            <div class="box2-item-txt2">监测点位</div>
          </div>
          <div class="box2-item">
            <div class="box2-item-txt1">1</div>
            <div class="box2-item-txt2">正常</div>
          </div>
          <div class="box2-item">
            <div class="box2-item-txt1">1</div>
            <div class="box2-item-txt2">异常</div>
          </div>
        </div>
        <div class="box3">
          <div class="box3-l">
            <div class="box3icon1"></div>
            应力检测
          </div>
          <div class="box3-r">
            <div class="box3-r1">
              <div class="box3icon2"></div>
              当前数据
            </div>
            <div class="box3-r2">
              <div class="box3icon2"></div>
              允许最大数据
            </div>
          </div>
        </div>
        <div id="bar"></div>

        <div class="box4">
          <div class="box4-l">
            <div class="box4icon1"></div>
            索力监测
          </div>
        </div>
        <div class="box5">
          <div class="box5-item" v-for="item in 2">
            <div class="box5-item-l"></div>
            <div class="box5-item-name">应力01</div>
            <div class="box5-item-c">
              <div class="box5-item-c-item" v-for="(item,index) in 26" :class="index < 12 ? 'box5-item-c-itemaa' : ''"></div>
            </div>
            <div class="box5-item-count">123</div>
          </div>
        </div>


      </div>
    </el-col>
    <el-col :span="14">
      <div class="grid-content ep-bg-purple" />
    </el-col>
    <el-col :span="5" style="height: 100%">
      <div class="home-r">
        <Ttitle title="钢箱梁吊装姿态" class="pos-txt3" />
        <div class="box8">
          <div class="box8item1"></div>
          <div class="box8item2">
            <div class="box8item4">
              <div></div>
            </div>
          </div>
          <div class="box8item3">25</div>
        </div>
        <div class="box7"></div>





        <Ttitle title="吊装同步性监测" class="pos-txt4" />
        <div id="bar2"></div>



        <Ttitle title="缆载吊机监控" class="pos-txt5" />

        <div class="box6">
          <div class="box6-item1">
            <div class="work-area">工作区域1</div>
            <div class="online">在线</div>
          </div>
          <div class="box6-item2">
            <div class="box6-item2-l">
              <div class="work-area">工作区域2</div>
              <div class="online">在线</div>
            </div>
            <div class="box6-item2-r">
              <div class="work-area">工作区域3</div>
              <div class="online">在线</div>
            </div>
          </div>
        </div>


      </div>
    </el-col>
  </el-row>

  <div class="home-border"></div>

</template>


<script setup>
import { ref,computed,onMounted } from "vue";
import Ttitle from "@/components/Ttitle.vue";
import * as echarts from "echarts";


const box1List = computed(() => {
  return [
    {
      name: "提升重量",
      typeName: "正常",
      type: 1,
      value: "500t",
      max: 20,
      min: 0,
      icon:new URL("/src/assets/img/体重1@2x.png", import.meta.url).href
    },
    {
      name: "提升速度",
      typeName: "预警",
      type: 2,
      value: "500t",
      max: 20,
      min: 0,
      icon:new URL("/src/assets/img/闪付1@2x.png", import.meta.url).href
    },
    {
      name: "荡移角度",
      typeName: "正常",
      type: 1,
      value: "500t",
      max: 20,
      min: 0,
      icon:new URL("/src/assets/img/角度 1@2x.png", import.meta.url).href
    },
    {
      name: "主缆中心距",
      typeName: "正常",
      type: 1,
      value: "500t",
      max: 20,
      min: 0,
      icon:new URL("/src/assets/img/地图距离 1@2x.png", import.meta.url).href
    },
    {
      name: "吊装高度",
      typeName: "正常",
      type: 1,
      value: "500t",
      max: 20,
      min: 0,
      icon:new URL("/src/assets/img/svg 14@2x.png", import.meta.url).href
    },
    {
      name: "主缆倾角",
      typeName: "正常",
      type: 1,
      value: "500t",
      max: 20,
      min: 0,
      icon:new URL("/src/assets/img/角度 1@2x.png", import.meta.url).href
    },
    {
      name: "吊装高度",
      typeName: "正常",
      type: 1,
      value: "500t",
      max: 20,
      min: 0,
      icon:new URL("/src/assets/img/svg 14@2x (1).png", import.meta.url).href
    },
    {
      name: "主缆倾角",
      typeName: "正常",
      type: 1,
      value: "500t",
      max: 20,
      min: 0,
      icon:new URL("/src/assets/img/角度 1@2x.png", import.meta.url).href
    },
    {
      name: "临时吊点",
      typeName: "正常",
      type: 1,
      value: "500t",
      max: 20,
      min: 0,
      icon:new URL("/src/assets/img/地图距离 1@2x (1).png", import.meta.url).href
    },
    {
      name: "行走速度",
      typeName: "正常",
      type: 1,
      value: "500t",
      max: 20,
      min: 0,
      icon:new URL("/src/assets/img/闪付 1@2x.png", import.meta.url).href
    },
  ]
})


const Pie1data = ref([
  { name: '重量预警', value: 18, itemStyle: { color: '#ffcc00' } },
  { name: '速度预警', value: 15, itemStyle: { color: '#00c0ff' } },
  { name: '高度预警', value: 32, itemStyle: { color: '#00ff99' } },
  { name: '倾角预警', value: 20, itemStyle: { color: '#00bfff' } },
  { name: '荡移预警', value: 15, itemStyle: { color: '#00dfff' } }
])

function initPie1(){

  var myChart = echarts.init(document.getElementById('pie'));

// 配置项
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)',
      textStyle: {
        fontSize: 6,
        // color: '#fff'
      }
    },
    legend: {
      show: false,
      icon: "circle", // 设置图例为圆形
      itemWidth: 5, // 设置图例宽度
      itemHeight: 5, // 设置图例高度
      align: 'right',
      y: "right", // 位置在左侧（相对于图表容器）
      data: [
        "重量预警",
        "速度预警",
        "高度预警",
        "倾角预警",
        "荡移预警"
      ],
      textStyle: {
        fontSize: 4,// 字体大小
        color: '#fff' // 图例文字颜色
      },
      left: '5%', // 调整图例位置到右侧
      top: 'center', // 垂直居中
      itemGap: 1 // 图例项之间的间距
    },
    series: [
      {
        name: '告警统计',
        type: 'pie',
        radius: ['60%', '80%'], // 环形图外圈
        avoidLabelOverlap: false,
        label: {
          show: false, // 不显示外圈标签
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '14',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: Pie1data.value,
        center: ['50%', '50%']
      },
      {
        // 新增一个透明的内圈，用于显示中心文字
        name: '中心文字',
        type: 'pie',
        radius: ['0%', '50%'], // 内圈半径，覆盖中心区域
        hoverAnimation: false, // 禁用悬停动画
        label: {
          show: true,
          position: 'center',
          formatter: function() {
            var total = Pie1data.value.reduce((sum, item) => sum + item.value, 0);
            return `告警统计\n${total}`;
          },
          fontSize: 6,
          fontWeight: 'bold',
          color: '#fff',
          lineHeight: 10 // 行高，调整文字间距
        },
        labelLine: {
          show: false
        },
        data: [
          // 使用一个透明的扇形占据整个中心圆
          { value: 100, itemStyle: { color: 'transparent' } }
        ],
        center: ['50%', '50%'],
        silent: true // 设置为静默，不响应交互
      }
    ],
    // 全局文字样式
    textStyle: {
      fontSize: 16,
      color: '#fff'
    }
  };

// 设置配置项
  myChart.setOption(option);

// 响应式调整
  window.addEventListener('resize', () => {
    myChart.resize();
  });




}

function initbar1(){
  var chart = echarts.init(document.getElementById('bar'));
  const option = {
    title: {
      show: false,
    },
    tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(20, 30, 50, 0.9)",
      borderColor: "#00FFFF",
      borderWidth: 1,
      textStyle: {
        color: "#fff",
        fontSize: 5,  // 减小提示框字体
      },
      formatter: (params) => {
        const current = params.find((p) => p.seriesName === "当前数据");
        const max = params.find((p) => p.seriesName === "允许最大数据");
        return `
                      <div style="font-size:6px">  <!-- 减小提示框内容字体 -->
                        <div>当前数据 <span style="float:right;color:#FFD700">${current.value}</span></div>
                        <div>允许最大数据 <span style="float:right;color:#00FFFF;">${max.value}</span></div>
                      </div>
                    `;
      },
    },
    legend: {
      show: false,
    },
    grid: {
      left: "0%",
      right: "0%",
      bottom: "5%",
      top: "10%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: ["A01", "A02", "A03", "A04", "A05", "A06"],
      axisLine: { lineStyle: { color: "#aaa" } },
      axisLabel: {
        color: "rgba(255, 255, 255, .5)",
        fontSize: 7  // 减小X轴标签字体
      },
    },
    yAxis: {
      type: "value",
      axisLine: { show: false },
      axisLabel: {
        color: "#ccc",
        fontSize: 5  // 减小Y轴标签字体
      },
      splitLine: { lineStyle: { color: "rgba(255,255,255,0.1)" } },
    },
    series: [
      {
        name: "当前数据",
        type: "bar",
        data: [6, 10, 7, 5, 4, 6],
        barWidth: 5,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            // { offset: 0, color: "#FFD700" },
            { offset: 1, color: "rgba(255, 178, 35, 1)" },
          ]),
          borderRadius: [4, 4, 0, 0],
        },
      },
      {
        name: "允许最大数据",
        type: "bar",
        barGap: '-100%',
        smooth: true,
        data: [10, 10, 10, 10, 10, 10],
        barWidth: 5,
        symbolSize: 0,
        lineStyle: { color: "#00FFFF", width: 1 },
        itemStyle: { color: "rgba(255, 255, 255, .2)" },
      },
      {
        name: "允许最大数据",
        type: "line",
        smooth: true,
        data: [8, 2, 10, 1, 9, 5],
        symbol: "circle",
        symbolSize: 0,
        lineStyle: { color: "#00FFFF", width: 1 },
        itemStyle: { color: "#00FFFF" },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "rgba(0,255,255,0.4)" },
            { offset: 1, color: "rgba(0,255,255,0)" },
          ]),
        },
      },

    ],
  };

  chart.setOption(option);
  window.addEventListener("resize", () => chart.resize());
}

function initbar2(){
  var chart = echarts.init(document.getElementById('bar2'));

  const option = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'axis',
      textStyle: {
        fontSize: 10
      }
    },
    grid: {
      left: '0%',
      right: '4%',
      bottom: '4%',
      top: '13%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['00:00', '4:00', '8:00', '12:00', '16:00', '20:00', '24:00'],
      axisLine: {
        lineStyle: { color: '#88aaff' }
      },
      boundaryGap: false,
      axisLabel: {
        color: 'rgba(255,255,255,0.7)',
        fontSize: 6  // ✅ X轴字体更小
      },
      splitLine: {
        show: true,  // 默认 false，这里改为 true
        lineStyle: {
          color: 'rgba(255,255,255,0.1)', // ✅ 与横线一致的淡白色
          width: 1,
          type: 'solid'                  // 可选 'solid' 实线、'dotted' 点线
        }
      }
    },
    yAxis: {
      type: 'value',
      name: '重量(单位:t)',
      nameLocation: 'end',  // 可选值：'start' | 'middle' | 'end'
      nameGap: 7,           // 与轴线的距离，默认 15，调小让它贴近坐标轴
      nameTextStyle: {
        color: 'rgba(255,255,255,0.7)',
        fontSize: 6
      },
      axisLabel: {
        color: 'rgba(255,255,255,0.7)',
        fontSize: 6
      },
      splitLine: {
        lineStyle: { color: 'rgba(255,255,255,0.1)' }
      }
    },
    series: [
      {
        name: '重量',
        type: 'line',
        smooth: false,
        data: [520, 700, 580, 510, 640, 620, 780],
        symbol: 'circle',
        symbolSize: 4, // ✅ 点也变小一点
        lineStyle: {
          color: '#4fc3f7',
          width: 2 // ✅ 线条略细
        },
        itemStyle: {
          color: '#4fc3f7',
          borderColor: '#fff',
          borderWidth: 1
        },
        areaStyle: {
          color: 'rgba(79,195,247,0.15)'
        },

      }
    ]
  }


  chart.setOption(option)

  window.addEventListener('resize', () => chart.resize())
}
onMounted(() => {
  initPie1()
  initbar1()
  initbar2()
})




</script>

<style scoped lang="less">
@primary-width: 350px;
.col-home{
  width: 100%;
  height: calc(100%);
  padding-top: 75px;
  box-sizing: border-box;
  z-index: 11;
}
.pos-txt1{
  position: absolute;
  top: 25px;
  left: 110px;
}
.pos-txt2{
  position: absolute;
  bottom: 455px;
  left: 110px;
}
.pos-txt3{
  position: absolute;
  top: 35px;
  right: 110px;
}
.pos-txt4{
  position: absolute;
  top: 320px;
  right: 110px;
}
.pos-txt5{
  position: absolute;
  bottom: 405px;
  right: 110px;
}
.box1{
  position: absolute;
  width: @primary-width;
  top: 70px;
  left: 70px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .box1-item{
    width: 49%;
    height: 65px;
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    background-image: url("@/assets/img/组合 392@2x.png");
    background-size: contain;
    margin-bottom: 3px;
    padding-bottom: 4px;
    box-sizing: border-box;
  }
  .box1-item:nth-child(2n){
    //margin-left: 5px;
  }
  .box1-item-top1{
    display: flex;
    align-items: center;
    justify-content: space-between;
    //flex-direction: column;
    padding: 2px 12px 0;
    box-sizing: border-box;
    .box1-item-top1-l{
      color: rgba(255, 255, 255, 1);
      font-family: Source Han Sans CN;
      font-size: 11.81px;
      font-weight: 400;
      line-height: 18px;
      letter-spacing: 0px;
      text-align: center;
      display: flex;
      align-items: center;
    }
    .box1-item-type1,.box1-item-type2{
      padding: 0 5px;
      box-sizing: border-box;
    }
    .box1-item-type1{
      box-sizing: border-box;
      border: 0.26px solid rgba(61, 249, 142, 0.3);
      border-radius: 3.11px;
      background: rgba(61, 249, 142, 0.08);
      color: rgba(61, 249, 142, 1);
      font-family: Source Han Sans CN;
      font-size: 10px;
      font-weight: 400;
      line-height: 15px;
      letter-spacing: 0px;
      text-align: center;
    }
    .box1-item-type2{
      box-sizing: border-box;
      border: 0.26px solid rgba(255, 180, 51, 1);
      border-radius: 3.11px;
      background: rgba(255, 138, 5, 0.08);
      color: rgba(255, 138, 5, 1);
      font-family: Source Han Sans CN;
      font-size: 10px;
      font-weight: 400;
      line-height: 15px;
      letter-spacing: 0px;
      text-align: center;
    }
    img{
      width: 12px;
      height: 12px;
      margin-right: 5px;
    }
  }
  .box1-item-c{
    width: calc(100% - 20px);
    box-sizing: border-box;
    margin: 0 auto;
    .box1-icon-box{
      display: flex;
      align-items: center;
      color: rgba(239, 248, 255, 1);
      font-family: Source Han Sans CN;
      font-size: 11.81px;
      font-weight: 400;
      line-height: 18px;
      letter-spacing: 0px;
      text-align: center;
      margin-bottom: 5px;
      .box1-icon1,.box1-icon2{
        width: 4px;
        height: 4px;
        margin-right: 5px;
        border-radius: 50%;
      }
      .box1-icon1{
        background: rgba(0, 223, 255, 1);
      }
      .box1-icon2{
        background: rgba(255, 180, 51, 1);

      }
    }
  }

  .box1-item-bom{
    display: flex;
    justify-content: space-between;
    padding: 0 10px 5px;
    box-sizing: border-box;
    color: rgba(255, 255, 255, 1);
    font-family: Source Han Sans CN;
    font-size: 11.81px;
    font-weight: 300;
    line-height: 18px;
    letter-spacing: 0px;
    text-align: center;
  }


}

.pie-box{
  position: absolute;
  top: 400px;
  left: 70px;
  display: flex;
  width: @primary-width;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#pie{
  width: 60%;
  height: 100px;
  //background: red;
}
.pie-mark{
  width: 50%;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-end;
  padding: 10px 0;
  box-sizing: border-box;
  .pie-mark-item{
    display: flex;
    align-items: center;
    .mark{
      width: 5px;
      height: 5px;
      border-radius: 50%;
    }
    .pie-mark-name{
      color: rgba(0, 223, 255, 1);

      font-family: Source Han Sans CN;
      font-size: 11.81px;
      font-weight: 400;
      line-height: 18px;
      letter-spacing: 0px;
      text-align: center;
      margin-left: 10px;
    }
    .pie-mark-value{
      color: rgba(239, 248, 255, .8);

      font-family: Source Han Sans CN;
      font-size: 11.81px;
      font-weight: 500;
      line-height: 18px;
      letter-spacing: 0px;
      text-align: center;
      margin-left: 30px;
      margin-right: 40px;
    }
  }
}

.box2{
  width: @primary-width;
  position: absolute;
  top: 560px;
  left: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .box2-item{
    width: 110px;
    height: 27px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-image: url("@/assets/img/容器 2288@2x (1).png");
    background-size: cover;
    background-repeat: no-repeat;
    box-sizing: border-box;
    border: 0.26px solid rgba(255, 255, 255, 0.5);
    border-radius: 2px;
    color: rgba(255, 255, 255, 1);
    font-family: Source Han Sans CN;
    padding: 0 5x;
    box-sizing: border-box;
    font-size: 12px;
    font-weight: 300;
    line-height: 18px;
    letter-spacing: 0px;
    text-align: center;
  }
}
.box3{
  position: absolute;
  top: 600px;
  left: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: @primary-width;
  .box3-l,.box3-r1,.box3-r2{
    display: flex;
    align-items: center;
    color: rgba(0, 223, 255, 1);
    font-family: Source Han Sans CN;
    font-size: 11.81px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0px;
    text-align: center;
  }
  .box3-r1,.box3-r2{
    color: rgba(255, 255, 255, .6);
  }
  .box3-r,.box3-r1,.box3-r2{
    display: flex;
    align-items: center;
  }
  .box3icon2,.box3icon3,.box3icon1{
    /* 容器 2249 */
    width: 10px;
    height: 10px;
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 5px;
  }
  .box3-r1{
    margin-right: 16px;
  }
  .box3icon2{
    background-image: url("@/assets/img/svg 17@2x.png");
  }
  .box3icon3{
    background-image: url("@/assets/img/容器 2249@2x.png");
  }
  .box3icon1{
    background-image: url("@/assets/img/svg 7@2x.png");
  }
}

#bar{
  position: absolute;
  top: 630px;
  left: 70px;
  width: @primary-width;
  height: 170px;
  //background: red;
}

.box4{
  position: absolute;
  top: 800px;
  left: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: @primary-width;
  .box4-l{
    display: flex;
    align-items: center;
    color: rgba(0, 223, 255, 1);
    font-family: Source Han Sans CN;
    font-size: 11.81px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0px;
    text-align: center;
  }
  .box4-l{
    margin-right: 16px;
  }
  .box4icon1{
    background-image: url("@/assets/img/svg 7@2x.png");
    width: 10px;
    height: 10px;
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 5px;
  }
}
.box5{
  position: absolute;
  top: 830px;
  left: 70px;
  width: @primary-width;
  .box5-item{
    width: 348px;
    height: 34px;
    box-sizing: border-box;
    border: 0.26px solid rgba(255, 255, 255, 0.5);
    border-radius: 3.11px;
    background: rgba(255, 255, 255, 0.12);
    margin-bottom: 10px;
    padding: 0 15px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .box5-item-l{
      background-image: url("@/assets/img/组合 465@2x.png");
      background-size: contain;
      background-repeat: no-repeat;
      width: 23px;
      height: 21px;
    }
    .box5-item-name{
      color: rgba(255, 255, 255, 1);
      font-family: Source Han Sans CN;
      font-size: 12px;
      font-weight: 300;
      line-height: 12.24px;
      letter-spacing: 0%;
      text-align: left;
    }
    .box5-item-c{
      /* 组合 459 */
      width: 211px;
      height: 14px;
      //border-radius: 4px;
      border: 1px solid rgba(0, 223, 255, 1);
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 5px;
      box-sizing: border-box;
      .box5-item-c-item{
        border-radius: 0.5px;
        background: rgba(255, 255, 255, 0.12);
        width: 3px;
        height: 8px;
      }
      .box5-item-c-itemaa{
        background: #00dfff;
      }
    }
    .box5-item-count{
      color: rgba(255, 255, 255, 1);
      font-family: Source Han Sans CN;
      font-size: 12px;
      font-weight: 400;
      line-height: 12.24px;
      letter-spacing: 0%;
      text-align: left;
    }
  }
}



#bar2{
  position: absolute;
  top: 360px;
  right: 70px;
  width: @primary-width;
  height: 200px;
  //background: red;
}

.box6{
  position: absolute;
  top: 610px;
  right: 70px;
  width: @primary-width;
  height: 265px;
  //background: red;
  .box6-item1{
    width: 100%;
    height: 155px;
    //background: red;
    position: relative;
    background-image: url("@/assets/img/组合 477@2x.png");
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
    border-radius: 8px;
  }
  .box6-item2{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 5px;
    .box6-item2-l,.box6-item2-r{
      width: 170px;
      height: 100px;
      position: relative;
      background-size: cover;
      background-repeat: no-repeat;
      overflow: hidden;
      border-radius: 8px;
    }
    .box6-item2-l{
      background-image: url("@/assets/img/容器 2374@2x.png");
    }
    .box6-item2-r{
      background-image: url("@/assets/img/容器 2375@2x.png");
    }
  }
  .work-area{
    position: absolute;
    top: 8px;
    left: 12px;
    /* 容器 2288 */
    width: 80px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 1);

    box-sizing: border-box;
    border: 0.26px solid rgba(255, 255, 255, 0.5);
    border-radius: 3.11px;
    background: linear-gradient(180.00deg, rgba(167, 207, 255, 0.5),rgba(167, 207, 255, 0.27) 34%,rgba(167, 207, 255, 0.14) 69%,rgba(167, 207, 255, 0) 100%);

    font-family: Source Han Sans CN;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0px;
    text-align: center;
  }
  .online{
    position: absolute;
    top: 8px;
    right: 8px;
    box-sizing: border-box;
    border: 0.26px solid rgba(255, 255, 255, 0.5);
    border-radius: 3.11px;
    background: linear-gradient(180.00deg, rgba(167, 207, 255, 0.5),rgba(167, 207, 255, 0.27) 34%,rgba(167, 207, 255, 0.14) 69%,rgba(167, 207, 255, 0) 100%);
    /* 容器 2289 */
    width: 42px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(61, 249, 142, 1);

    font-family: Source Han Sans CN;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0px;
    text-align: center;

  }
}


.box7{
  position: absolute;
  top: 30px;
  right: 70px;
  width: @primary-width;
  height: 300px;
  //background: red;
  background-image: url("@/assets/img/容器 2372@2x (1).png");
  background-size: 100% 98%;
  background-repeat: no-repeat;
}
.box8{
  position: absolute;
  top: 90px;
  right: 70px;
  width: @primary-width;
  height: 25px;
  //background: red;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  box-sizing: border-box;
  .box8item1{
    width: 94px;
    height: 22px;
    background-image: url("@/assets/img/组合 509@2x.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 7px;
  }
  .box8item2{
    /* 容器 2288 */
    width: 200px;
    height: 8px;
    box-sizing: border-box;
    border: 0.25px solid rgba(255, 255, 255, 1);
    border-radius: 3.11px;
    background: rgba(0, 180, 239, 0.4);
    position: relative;
    .box8item4{
      position: absolute;
      //background-image: url("@/assets/img/组合 488@2x.png");
      /* 组合 488 */
      width: 20px;
      height: 20px;
      box-sizing: border-box;
      border: 1px solid rgba(255, 255, 255, 0.3);
      backdrop-filter: blur(8px);
      background: rgba(255, 255, 255, 0.1);
      border-radius: 50%;
      top: -7px;
      left: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      div{
        /* 矢量 474 */
        width: 6px;
        height: 6px;
        box-sizing: border-box;
        background: rgba(255, 180, 51, 1);
        border-radius: 50%;
      }
    }
  }
  .box8item3{
    color: rgba(255, 202, 102, 1);

    font-family: Source Han Sans CN;
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    letter-spacing: 0px;
    text-align: right;
    margin-left: 20px;
  }
}


.home-border{
  background-image: url("@/assets/img/开发用2@2x.png");
  background-size: contain;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom:0;
  z-index: 10;
}
.home-l{
  width: 100%;
  height: 100%;
  background-size: cover;
  padding-top: 60px;
  padding-left: 30px;
  box-sizing: border-box;
  position: relative;
  .home-ll{
    position: absolute;
    background-size: contain;
    width: 10px;
    height:75%;
    left: 10px;
  }
}
.home-r{
  width: 100%;
  height: 100%;
  background-size: contain;
  padding-top: 60px;
  padding-right: 30px;
  box-sizing: border-box;
  position: relative;
  .home-rr{
    right: 10px;
    position: absolute;
    background: url("@/assets/img/image 2@2x (1).png");
    background-size: contain;
    width: 10px;
    height:75%;
  }
}

.home-c{
  background: url("@/assets/img/容器 2426@2x.png");
  background-size: contain;
  background: red;
  margin-top: 180px;
  width: 60%;
  height: calc(100% - 75px);
}

</style>
